<template>
  <div class="box">
    <div class="allbox loginallbox">
      <div class="tag_box">
        <div class="tab" v-if="this.$route.meta.note">
          {{ this.$route.meta.note }}
        </div>
        <div class="tab" v-else>{{ this.$route.meta.title }}</div>
      </div>
      <div class="login_box_gr">
        <div class="login_box_gr_input zc">
          <div class="login_title">{{ this.$route.meta.title }}</div>
          <el-input placeholder="请输入手机号" v-model="form.account">
            <template slot="prepend">账号：</template>
          </el-input>
          <el-input
            show-password
            placeholder="请输入密码"
            v-model="form.newpassword"
          >
            <template slot="prepend">密码：</template>
          </el-input>
          <el-input
            show-password
            placeholder="请再次输入密码"
            v-model="form.repassword"
          >
            <template slot="prepend">确认密码：</template>
          </el-input>
          <el-input
            placeholder="请再次输入验证码"
            v-model="form.code"
            class="yaz"
          >
            <template slot="prepend">验证码：</template>
            <template slot="append"
              ><p style="cursor: pointer" @click="check()" v-if="isSend">
                发送验证码
              </p>
              <p v-if="!isSend">{{ sendmsg }}</p></template
            >
          </el-input>

          <div class="delu" @click="getpaw()">确定</div>
          <div class="tishi_login">
            <div>
              想起密码，去
              <span class="tz" @click="back()">登录</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
      
      <script>
export default {
  data() {
    return {
      form: {
        account: "",
        newpassword: "",
        repassword: "",
        code: "",
      },
      sendmsg: "发送验证码",
      isSend: true,
    };
  },

  mounted() {},
  methods: {
    /**
     * 返回上一级页面(登录)
     */
    back() {
      this.$router.go(-1);
    },
    /**
     * 发送验证码
     */
    check() {
      let that = this;
      let data = {
        mobile: that.form.account,
        type:1,
        event: "resetpwd", //验证码类型
      };
      // console.log(data)
      that.$http.post("sms/send", data).then((res) => {
        that.$self.ts(res, 1).then((e) => {
          // this.$message.success("发送成功");
          this.isSend = false;
          let timer = 60;
          this.sendmsg = timer + "s";
          this.timeFun = setInterval(() => {
            --timer;
            this.sendmsg = timer + "s";
            if (timer == 0) {
              this.isSend = true;
              this.sendmsg = "重新发送";
              clearInterval(this.timeFun);
            }
          }, 1000);
        });
        // console.log(res);
      });
    },
    /**
     * 密码找回
     */
    getpaw() {
      let that = this;
      let data = that.form;
      // console.log(JSON.stringify(data))
      that.$http.post("mechanism/resetpwd", data).then((res) => {
        that.$self.ts(res, 2).then((e) => {
          this.$router.push({ path: "/jglogin" });
        });
      });
    },
    //  ==
  },
};
</script>
<style scoped>
::v-deep .el-input-group__append,
.el-input-group__prepend {
  width: 60px;
  color: #333;

}
::v-deep .el-input-group__prepend {
  width: 69px;
  color: #333;
}
/* .yaz .el-input__inner {
    border-right: none;
  } */
.yaz .el-input-group__append {
  background: #fff;
  border-left: none;
  font-size: 0.17rem;
  color: #1954a4;
  padding: 0 0.25rem;
}
@media screen and (max-width: 1385px) {
  .zc .yaz .el-input-group__append,
  .el-input-group__prepend {
    width: 62px !important;
    font-size: 0.1625rem;
    padding: 0 0.0375rem;
    text-align: center;
  }
}
</style>